<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据银行：HTTP计算机 Demo (纯前端模拟)</title>
    <style>
        /* Basic styling for readability and visual separation */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            margin: 20px auto;
            max-width: 900px;
            padding: 0 20px;
            color: #333;
            background-color: #f9f9f9;
        }
        h1, h2, h3, h4 {
            color: #2c3e50;
        }
        p {
            margin-bottom: 1em;
        }
        .description {
            background-color: #e8f5e9;
            border-left: 5px solid #4caf50;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .highlight {
            color: #e44d26;
            font-weight: bold;
        }
        section {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        code {
            background-color: #eef;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: 'Source Code Pro', 'Courier New', monospace;
            color: #c7254e;
        }
        pre {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Source Code Pro', 'Courier New', monospace;
            line-height: 1.5;
            tab-size: 4;
            white-space: pre-wrap; /* Ensure line wrapping */
        }
        pre code {
            background-color: transparent;
            color: #f8f8f2;
            padding: 0;
            font-weight: normal;
        }
        .update-note {
            background-color: #fcf8e3;
            border: 1px solid #faebcc;
            color: #8a6d3b;
            padding: 15px;
            border-radius: 4px;
        }
        .update-note h3 {
            color: #8a6d3b;
            margin-top: 0;
        }
        ol {
            padding-left: 20px;
        }
    </style>
</head>
<body>
<p class="description">
    一个极简的概念验证Demo，旨在展示我们核心的“数据保险箱”和“HTTP计算机”理念。
    <br>
    <span class="highlight">所有数据都将存储在你的浏览器本地存储 (Local Storage) 中，无任何后端服务。（强调：这仅仅是demo，完整的游戏中当然包含后端服务）</span>
    你将拥有一个 512 字节的私有内存段，可以自由读写。
</p>

<section id="login-section">
    <h2>1. 用户身份模拟</h2>
    <p>
        纯前端模拟游戏用户身份（Steam ID）的管理：
        <br>
        系统将自动在浏览器 <span class="highlight">本地存储 (Local Storage)</span> 中管理您的用户 ID。
    </p>
</section>

<section id="http-computer-section">
    <h2>2. HTTP Computer 范例 (在 Console 中运行)</h2>
    <p>打开浏览器的 <span class="highlight">开发者工具 (F12)</span>，在 <span class="highlight">Console (控制台)</span> 标签页中粘贴并运行以下代码。</p>
    <p>这将模拟你的 HTTP Computer 客户端，通过直接调用页面中提供的 <code class="highlight">getByte()</code> 和 <code class="highlight">setByte()</code> 函数（它们在本地模拟了 API 交互）与 Data Bank 交互。</p>
    <pre><code>
(async () => {
    // 请确保这些函数在当前页面上下文中可用 (已由页面脚本定义)
    // setByte(address, value); // 修改后可以传入 updateUI=false for silent updates if needed, though default is true
    // getByte(address); // 修改后可以传入 updateUI=false for silent reads if needed, though default is true
    // selectAddressInGrid(address); // 客户端更新UI的方法

    const MY_PRIVATE_ADDR_START = 0; // 假设在私有内存段的起始地址进行操作
    const SINGLE_ACCESS_RATE_LIMIT_SECONDS = 1; // 模拟API访问频率限制的秒数
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // 用于模拟延时

    console.log("[Program] 初始化：在私有地址 " + MY_PRIVATE_ADDR_START + " 写入值 10。");
    setByte(MY_PRIVATE_ADDR_START, 10);
    selectAddressInGrid(MY_PRIVATE_ADDR_START); // Update UI
    console.log("[Program] 写入完成。等待 " + SINGLE_ACCESS_RATE_LIMIT_SECONDS + " 秒... (模拟API访问频率限制)");
    await sleep(SINGLE_ACCESS_RATE_LIMIT_SECONDS * 1000 + 100);

    let value = getByte(MY_PRIVATE_ADDR_START);
    selectAddressInGrid(MY_PRIVATE_ADDR_START); // Update UI
    console.log("[Program] 从私有地址 " + MY_PRIVATE_ADDR_START + " 读取到值: " + value + "。等待 " + SINGLE_ACCESS_RATE_LIMIT_SECONDS + " 秒...");
    await sleep(SINGLE_ACCESS_RATE_LIMIT_SECONDS * 1000 + 100);

    const new_value = value + 1;
    console.log("[Program] 计算新值: " + value + " + 1 = " + new_value + "。");
    console.log("[Program] 将新值 " + new_value + " 写入私有地址 " + (MY_PRIVATE_ADDR_START + 1) + "...");
    setByte(MY_PRIVATE_ADDR_START + 1, new_value);
    selectAddressInGrid(MY_PRIVATE_ADDR_START + 1); // Update UI
    console.log("[Program] 写入完成。等待 " + SINGLE_ACCESS_RATE_LIMIT_SECONDS + " 秒...");
    await sleep(SINGLE_ACCESS_RATE_LIMIT_SECONDS * 1000 + 100);

    const verify_result = getByte(MY_PRIVATE_ADDR_START + 1);
    selectAddressInGrid(MY_PRIVATE_ADDR_START + 1); // Update UI
    console.log("[Program] 验证完成。地址 " + (MY_PRIVATE_ADDR_START + 1) + " 的最终值: " + verify_result);

    console.log("--- 范例程序运行完毕 ---");
    // 程序运行结束后刷新 UI 网格，并确保最后一个操作的地址被选中
    // renderPrivateMemoryGrid(); // Not strictly needed if setByte/getByte update individual boxes and ASCII rows
})();
    </code></pre>

</section>

<!-- **** 更新说明已替换原有的“想法和建议”区块 **** -->
<section class="update-note">
    <h3>更新</h3>
    <h4>2025-9-5</h4>
    <ol>
        <li>学习Hexdump，左侧是地址，右侧是字符串表示</li>
        <li>数据监视器 跟随鼠标</li>
    </ol>
</section>
<!-- **** 更新说明区块 END **** -->
</body>
</html>